<template>
	<div class="setting-base">
		<div class="setting-title">
			<p>标题</p>
			<div></div>
		</div>
		<div class="setting-form">
			<el-form :model="form">
				<el-form-item label="标题内容">
					<el-input v-model="form.title" placeholder="请输入标题内容" />
				</el-form-item>
				<el-form-item label="描述内容">
					<el-input v-model="form.desc" placeholder="请输入描述内容" />
				</el-form-item>
				<!-- <el-form-item label="显示位置">
					<el-radio-group v-model="form.showType">
						<el-radio label="居左" value="1" />
						<el-radio label="居中" value="2" />
					</el-radio-group>
				</el-form-item> -->
				<el-form-item label="标题大小">
					<el-radio-group v-model="form.titleSize">
						<el-radio label="16">大 </el-radio>
						<el-radio label="14">中</el-radio>
						<el-radio label="12">小</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="描述大小">
					<el-radio-group v-model="form.descSize">
						<el-radio label="16">大 </el-radio>
						<el-radio label="14">中</el-radio>
						<el-radio label="12">小</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="标题粗细">
					<el-radio-group v-model="form.titleWeight">
						<el-radio label="0">常规体 </el-radio>
						<el-radio label="1">加粗体</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="描述粗细">
					<el-radio-group v-model="form.descWeight">
						<el-radio label="0">常规体 </el-radio>
						<el-radio label="1">加粗体</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="标题颜色">
					<el-color-picker v-model="form.titleColor" />
				</el-form-item>
				<el-form-item label="描述颜色">
					<el-color-picker v-model="form.descColor" />
				</el-form-item>
				<el-form-item label="背景颜色">
					<el-color-picker v-model="form.bgColor" />
				</el-form-item>
				<el-form-item label="底部分割线">
					<el-switch v-model="form.bottomLine" active-text="显示" inactive-text="不显示" />
				</el-form-item>
				<el-form-item label="查看更多按钮">
					<el-switch v-model="form.moreBtn" active-text="显示" inactive-text="不显示" />
				</el-form-item>
				<el-form-item>
					<el-radio-group v-model="form.moreBtnStyle" v-if="form.moreBtn">
						<el-radio label="1">样式一 </el-radio>
						<el-radio label="2">样式二</el-radio>
						<el-radio label="3">样式三</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item v-if="form.moreBtn && form.moreBtnStyle != '3'">
					<el-input v-model="form.moreBtnText" />
				</el-form-item>
				<el-form-item label="跳转链接" v-if="form.moreBtn">
					<linkPage ref="linkPageUrl" :pageUrl="form.linkUrl" :pageName="form.linkTitle" @linkPageCurrent="linkPageCurrent"> </linkPage>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script lang="ts">
import { reactive, defineComponent, toRefs, watch, onMounted } from 'vue';
import { storeToRefs } from 'pinia';
import { diypage } from '/@/stores/diyPage';
import linkPage from './linkPage.vue';
export default defineComponent({
	components: { linkPage },
	props: {
		formData: {
			type: Object,
			defult: {},
		},
	},
	setup(props) {
		// 定义变量内容
		const storesDiypage = diypage();
		const { diyPageData } = storeToRefs(storesDiypage);

		// do not use same name with ref
		const state = reactive({
			form: {
				title: '我是标题',
				desc: '我是描述',
				showType: '1',
				titleSize: '14',
				descSize: '12',
				titleWeight: '0',
				descWeight: '0',
				titleColor: '#000',
				descColor: '#000',
				bgColor: '#fff',
				bottomLine: false,
				moreBtn: false,
				moreBtnText: '查看更多',
				moreBtnStyle: '1',
				linkUrl: '',
				linkTitle: '',
			},
		});
		// 页面加载时
		onMounted(() => {
			if (JSON.stringify(props.formData) == '{}') {
				state.form = {
					title: '我是标题',
					desc: '我是描述',
					showType: '1',
					titleSize: '14',
					descSize: '12',
					titleWeight: '0',
					descWeight: '0',
					titleColor: '#000',
					descColor: '#000',
					bgColor: '#fff',
					bottomLine: false,
					moreBtn: false,
					moreBtnText: '查看更多',
					moreBtnStyle: '1',
					linkUrl: '',
					linkTitle: '',
				};
			} else {
				state.form = props.formData;
			}
			diyPageData.value.componentsList[diyPageData.value.selectedIndex].data = state.form;
		});

		watch(
			() => props.formData,
			(newValue, oldValue) => {
				state.form = newValue ? newValue : state.form;
				// 注意：`newValue` 此处和 `oldValue` 是相等的
				// *除非* state.someObject 被整个替换了
			},
			{ deep: true, immediate: true }
		);
		const linkPageCurrent = (page: any) => {
			state.form.linkUrl = page.pageUrl;
			state.form.linkTitle = page.pageName;
		};
		return {
			linkPageCurrent,
			...toRefs(state),
		};
	},
});
</script>
<style scoped lang="scss">
@import './common.scss';
</style>
